<template>
    <el-row>
        <el-col :span="6">
          <!-- 功能模块选择 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>算例类型</span>
            </div>
            <el-select v-model="functionalModule" placeholder="请选择">
              <el-option
                v-for="item in functionalModules"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>数据分析</span>
            </div>
            <el-select v-model="analysisArea">
              <el-option
                v-for="item in analysisAreas"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-card>
        </el-col>
        <el-col :span="3">
           <div style="display: inline-block; float: right;">
            <el-button type="primary" @click="dataSubmit">数据提交</el-button>
          </div>
        </el-col>
        
      </el-row>
      <el-row>
    
        <el-col :span="24">
          <!-- table展示区域 -->
          <el-card class="box-card">
            <!-- <div slot="header" class="clearfix">
              <span>数据表格展示区</span>
            </div> -->
            <!-- 这里可以添加表格组件 -->
            <div >
                <el-table :data="tableData" stripe style="width: 100%;height: 100%" height="563">
                    <el-table-column prop="agent" label="智能体" width="180" />
                    <el-table-column prop="reward_function" label="奖励函数" width="180" />
                    <el-table-column prop="interaction_type" label="交互类型" width="180" />
                    <el-table-column prop="interaction_data_standard" label="交互数据规范" />
                </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
</template>
<script lang="ts" setup>
import { computed, defineComponent, ref,watch } from "vue";
import type { ImageProps } from 'element-plus'
import axios from "axios";
import {BASE_URL} from '@/utils/common.js'

const functionalModule = ref("");
const performanceIndicator = ref("");
const analysisArea = ref("");
// 下拉框初始化完毕
// 下拉框赋值
const functionalModules = ref([
  {value:"",label:"请选择"},  
  { value: "integrated_energy", label: "综合能源" },
  { value: "distributed_grid", label: "分布式协同电网" },
  // ... 其他功能模块
]);


const analysisAreas = ref([
 
]);

const selectedFunctionalModule = computed(()=>{
    return functionalModules.value.find(item => item.value === functionalModule.value);
});

const selectedAnalysisArea = computed(()=>{
  var selectedItem = analysisAreas.value.find(item=>item.value ===analysisArea.value)
  //console.log("第二个选择框当前的值是::"+selectedItem);
  return selectedItem
})

watch(functionalModule,(newVal,oldVal)=>{
   console.log("param1是::"+newVal);
   if(newVal === "integrated_energy"){
      analysisAreas.value=[
        { value: "optimizedControll", label: "优化控制" },
      ]
      analysisArea.value = 'optimizedControll'
   }else if(newVal === "distributed_grid"){
       analysisAreas.value=[
        { value: "faultProcess", label: "故障处置" },
       ]
       analysisArea.value = "faultProcess";
   }
   else{
     analysisAreas.value=[]
     analysisArea.value = ''
   }
})

watch(analysisArea,(newVal,oldVal)=>{
   console.log("第二个选择框当前的值是::"+newVal);
   analysisArea.value = newVal;
})

const dataSubmit = async ()=>{
   const formData = new FormData();
   formData.append('functionModule',selectedFunctionalModule.value.label);
     if(selectedAnalysisArea.value){
         console.log("点提交时，选择框二的值是：："+selectedAnalysisArea.value.label)
         formData.append('analysis',selectedAnalysisArea.value.label);
     }
   
   //console.log("选择的值是::"+selectedFunctionalModule.value.label);
   try{
     const response = await axios.post(BASE_URL+'/getAgentList', formData, {  
          headers: {  
          	'Content-Type': 'application/json', 		
          },  
        });  
        console.log(response.data);
        tableData.value = response.data;
        
   }catch(error){
     console.error(error); 
   }
   
}

function simulateAndVerify() {}

//图片js
const fits = [
  'fill'
 
] as ImageProps['fit'][]
const url = ref(BASE_URL+"/getEmptyImg")
 // 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'


//表格
  const tableData = ref([]);


</script>

<style scoped lang="scss">
analysis-button {
  background-color: rgb(33, 108, 157);
}

::v-deep .el-tabs__item {
  color: rgb(245, 245, 245);
}

.box-card {
  margin-bottom: 10px;
  background-color: rgb(26, 68, 94);
  color: rgb(245, 245, 245);
  border-width: 0;
}
/* 其他样式 */
.custom-header {
  background-color: rgb(26, 68, 94);
  padding-top: 15px;
}

.nav-tab {
  display: inline-block; /* 使 div 表现得像行内块级元素 */
  float: right; /* 使其右浮动 */
  color: rgb(245, 245, 245);
}

/*图片 */
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
